@charset 'utf-8';

@mixin img(){
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: 100px;
    .logo{
        margin-left: 168px;
        margin-top: 20px;
    }
    p{
        font-size: 22px;
        line-height: 120px;
        color: #444f58;
        margin-left: -60px;
    }
}
.back{
     background: url(../img/login/backlogin.jpg) no-repeat ;
}
.foot{
    background: white;
    height: 192px;
    p{
        color: #878787;
        font-size: 12px;
        padding-top: 28px;
    }
}
article{
    width: 100%;
    height:540px;
    position: relative;
    background: url(../img/login/bg.png) no-repeat 0 240px;
    .login{
        width: 438px;
        height: 444px;
        border: 1px solid #e7e7e7;
        background: white;
        border-radius:2px ;
        position: absolute;
        top: 48px;
        right: 120px;
        text-align: center;
        h3{
            font-size: 20px;
            color: #444f58;
            margin-top: 27px;
            margin-bottom: 23px;
        }
        .info{
            width: 360px;
            height: 40px;
            margin:0 auto;
            background: #f8f8f8;
            margin-bottom: 7px;
            div{
                width: 17px;
                height: 17px;
                margin:11px 17px 12px 21px;
                overflow: hidden;
                border-radius: 50%;
                img{
                    @include img();
                }
            }
            p{
                font-size: 13px;
                color: #99999a;
                line-height: 40px;
            }
        }
        .username,.password{
            width: 358px;
            height: 40px;
            border: 1px solid #e7e7e7;
            position: relative;
            margin: 0 auto 22px;
            input[type='username'],input[type='password']{
                width: 100%;
                height: 100%;
                text-indent: 53px;
                font-size: 13px;
                color: #99999a;
            }
            input[type='image']{
                position: absolute;
                left: 14px;
                top: 14px;
            }
        }
        .forget{
            width: 358px;
            height: 40px;
            margin: 2px auto 0;
            div{
                input[type='image']{
                    width: 13px;
                    height: 13px;
                    border: 1px solid #444f58;
                }
            }
            span{
                font-size: 13px;
                color: #444f58;
                a{
                    color: #444f58;
                }
            }
        }
        input[type='submit']{
            width: 360px;
            height: 54px;
            line-height: 54px;
            color: white;
            background: #eb413d;
            border-radius:24px;
            cursor: pointer;
        }
        ul{
            width: 100%;
            height: 67px;
            border-top: 1px solid #efefef;
            position: absolute;
            left: 0;
            bottom: 0;
            li{
                float: left;
                width: 74px;
                height: 26px;
                margin-top: 18px;
                margin-left: 18px;
                border-right: 1px solid #efefef;
                &:first-child{
                    margin-left: 44px;
                }
                &:last-child{
                    border-right: none;
                    width: 78px;
                    img{
                        position: relative;
                        top: 2px;
                    }
                    span{
                        bottom: 2px;
                    }
                }
                span{
                    position: relative;
                    bottom: 6px;
                    a{
                        display: inline-block;
                        font-size: 13px;
                        color: #99999a;
                    }
                }
            }
        }
    }
}
